<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>watch监听-防抖写法</title>
    <style>
        .input-group {
            display: flex;
            align-items: center;
            margin-bottom: 10px;
        }

        .input-label {
            width: 100px;
            text-align: right;
            padding-right: 10px;
        }

        input[type="text"] {
            width: 300px;
            padding: 5px;
            box-sizing: border-box;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="input-group">
            <label class="input-label">输入文字:</label>
            <input type="text" v-model="obj.words">
        </div>
        <div class="input-group">
            <label class="input-label">翻译结果:</label>
            <input type="text" v-model="result" readonly>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script>
        const app = new Vue({

            el: '#app',
            data: {
                obj: {
                    words: "单词123",
                    lang: "中文"
                },
                result: "sssss"


            },
            methods: {
                translateText() {

                }
            },


            watch: {
                obj: {
                    deep: true, // 深度监视
                    immediate: true, // 立刻执行，一进入页面handler就立刻执行一次
                    handler(newValue) {

                        // 发送 GET 请求
                        clearTimeout(this.timer);
                        this.timer = setTimeout(async () => {
                            const res = await axios({
                                url: 'https://applet-base-api-t.itheima.net/api/translate',
                                params: newValue
                            })
                            this.result = res.data.data
                            console.log(res.data.data)
                        }, 300)


                    }
                }



            }

        }



        );
    </script>
</body>

</html>